<style include="shared-style">
  :host {
    color: var(--cr-secondary-text-color);
    min-width: 300px;
    overflow-y: auto;
    padding-bottom: 24px;
    padding-inline-end: var(--card-padding-side);
    padding-inline-start: calc(var(--card-padding-side) -
        var(--splitter-width));
    padding-top: 24px;
  }

  #list {
    background-color: var(--cr-card-background-color);
    border-radius: var(--cr-card-border-radius);
    box-shadow: var(--cr-card-shadow);
    margin: 0 auto;
    max-width: var(--card-max-width);
    padding: 8px 0;
  }

  .centered-message {
    align-items: center;
    color: var(--md-loading-message-color);
    cursor: default;
    display: flex;
    font-size: 14px;
    font-weight: 500;
    height: 100%;
    justify-content: center;
    user-select: none;
    white-space: nowrap;
  }

  [role='row']:focus-within {
    z-index: 1;
  }
</style>
<iron-list id="list"
    items="[[displayedList_]]"
    hidden$="[[isEmptyList_(displayedList_.length)]]"
    role="grid"
    aria-label="$i18n{listAxLabel}"
    aria-multiselectable="true">
  <template>
    <bookmarks-item
        id="bookmark_[[index]]"
        item-id="[[item.id]]"
        draggable="true"
        role="row"
        tabindex$="[[tabIndex]]"
        iron-list-tab-index="[[tabIndex]]"
        aria-rowindex$="[[getAriaRowindex_(index)]]"
        aria-selected="[[getAriaSelected_(item.id, selectedItems_)]]">
    </bookmarks-item>
  </template>
</iron-list>
<div id="message" class="centered-message"
    hidden$="[[!isEmptyList_(displayedList_.length)]]">
  [[emptyListMessage_(searchTerm_)]]
</div>
